<template>
  <el-dialog title="物料组成" :visible.sync="dialogVisible" width="800px" :before-close="dialogBeforeClose" class="dialogs" center>
    <div>
      <el-table :data="list" style="width: 100%" highlight-current-row border height="60vh" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
        <el-table-column prop="materialCode" label="材料编码" />
        <el-table-column prop="materialName" label="材料名称" />
        <el-table-column prop="specs" label="规格" />
        <el-table-column prop="img" label="图片" width="160">
          <template slot-scope="{row}">
            <el-image style="width: 60px; height: 60px" :src="row.img" :preview-src-list="srcList" :z-index="9999"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="数量" />
        <el-table-column prop="unit" label="单位" />
      </el-table>
    </div>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      searchVal: "",
      total: 0,
      dialogVisible: false,
      srcList:[]
    };
  },
  methods: {
    dialogBeforeClose() {
      this.dialogVisible = false;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.dialogs ::v-deep {
  th {
    background: #fafafa;
    color: #000;
  }
  .el-pagination {
    padding-top: 10px;
    text-align: right;
  }
  td {
    padding: 5px 0;
  }
}
</style>